<template>
    <div class="safe-area-bottom home-wrap">
        <div class="obligation_tops">
            <div class="obligation_top_time">
                <div>
                    <img src="../../../../images/mine/icon_close.png" alt="">{{ orderInfo.status_text }}
                </div>
                <!-- <div>{{ orderInfo.payment_success_time }}</div> -->
            </div>
            <div class="obligation_top_address">
                <img src="../../../../images/mine/icon_adress.png" alt="">
                <div>
                    <div class="obligation_top_address_name">
                        <!-- 名称 <i>1555555</i> <span>默认</span> -->
                        {{ orderInfo.address.contact }} <span>默认</span>
                    </div>
                    <div class="obligation_top_address_address">
                        {{ orderInfo.address.address }}
                    </div>
                </div>
            </div>
        </div>
        <div class="order_name">
            <!-- <div class="order_name_left"> -->
            <div class="order_name_left"> <img src="../../../../images/mine/shop.png" alt="">{{ orderInfo.shop_name }}
            </div>
            <!-- </div> -->
            <!-- <div class="order_name_right">等待付款</div> -->
        </div>
        <div v-for="item, index in orderInfo.items" :key="index">
            <div class="order_list">
                <img :src="item.left_icon" alt="">
                <div class="order_goods">
                    <div class="order_goods_name">{{ item.title }}</div>
                    <div class="order_goods_sku">{{ item.sku_text }}</div>
                    <div class="order_goods_price"><span>{{ item.price_text }}</span> <span>{{ item.quantity_text
                            }}</span></div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="obligation_item">
            <div class="obligation_item_con" v-for="item, index in orderInfo.expense_items" :key="index">
                <div>{{ item.left_text }}</div>
                <div>{{ item.right_text }}</div>
            </div>
        </div>
        <div class="obligation_bom">
            <div class="obligation_btn">
                <div class="obligation_btn_price"></div>
                <div style="display: flex;">
                    <div class="" v-for="itemBtn, index in orderInfo.buttons" :key="index"
                        @click="getOrder(itemBtn.key)">
                        <van-button class="order_pay_btn" size="small"
                            :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''" round>{{
                        itemBtn.name
                    }}</van-button>
                    </div>
                </div>
            </div>
        </div>
        <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title">是否删除该订单？</div>
            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="show=false">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient(to right, #FF5851, #E9011B)" round @click="cancelSubmit">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
export default{
    props:['orderInfo'],
    data() {
        return {
            show:false
        }
    },
    methods: {
        getOrder(key){
            if(key=='order_delete'){
                // 删除订单
                this.show=true
            }else if(key=='order_repeat_purchase'){
                // 再次购买
            }
        },
        cancelSubmit(){
            this.$http.post(ORDER_CANCEL+this.orderInfo.id,).then(res=>{
                this.$toast.success(res.message);
                this.$router.back()
            })
        }
    },
    
}
</script>
<style lang="scss" scoped>
.home-wrap {
    min-height: 100vh;
    background: #F2F4F5;
}
.obligation_tops {
    background: #fff;
    padding: 0.3rem;
    margin: 0 auto;
    // margin-top: 0.2rem;
    // border-bottom: 1px solid #999;

    .obligation_top_time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.4rem;
        font-weight: bold;
        margin-bottom: 0.3rem;

        div {
            img {
                width: 0.56rem;
                height: 0.56rem;
                margin-right: 0.1rem;
                vertical-align: middle;
            }
        }
    }

    .obligation_top_address {
        // background: #fff;
        font-size: 0.3rem;
        line-height: 0.5rem;
        display: flex;

        img {
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.3rem;
            margin-right: 0.3rem;
        }

        div {
            .obligation_top_address_name {
                font-weight: bold;
                font-size: 0.32rem;
                i{
                    font-style: normal;
                    font-weight: 500;
                    font-size: 0.28rem;
                    // margin: 0 0.2rem
                    color: #999999;
                }
                span {
                    font-weight: 500;
                    font-size: 0.28rem;
                    border: 0.01rem solid #F32A23;
                    padding: 0.02rem 0.05rem;
                    color: #F32A23;
                    border-radius: 0.02rem;
                }
            }
            .obligation_top_address_address{
                font-size: 0.28rem;
                color: #999;

            }
        }
    }
}

.order_name {
    background: #fff;
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem;
        margin-top: 0.16rem;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        img {
            width: 0.5rem;
            height: .5rem;
            vertical-align: middle;
            margin-right: .16rem
        }

        &_left {
            font-weight: bold;
        }

        &_right {
            font-size: 0.25rem;
        }
    }

.order_list {
    background: #fff;
    padding: 0 0.32rem 0.2rem 0.32rem;
    display: flex;
    justify-content: space-between;
    // border-bottom: 0.01rem solid #999;

    img {
        width: 1.8rem;
    }

    .order_goods {
        width: 70%;
        font-size: 0.3rem;
        line-height: 0.6rem;

        &_name {
            // font-size: 0.3rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 控制显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 0.35rem;
            font-size: 0.3rem;
            // font-weight: bold;
        }

        &_sku {
            font-size: 0.28rem;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &_price {
            font-size: 0.35rem;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            color: #F32A23;
            margin-top: 0.2rem;
            span:last-child {
                font-weight: 500;
                font-size: 0.25rem;
                color: #999;
            }
        }
    }
}

.obligation_item {
    padding: 0.2rem;
    background: #fff;
    margin-top: 0.16rem;
    .obligation_item_con {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        line-height: 0.6rem;
        div:last-child {
            color: #999999;
        }
    }
}

.obligation_bom {
    width: 100%;
    position: fixed;
    bottom: 0;
    // border-top: 0.01rem solid #999;
    background-color: #fff;
    .obligation_btn {
        padding: 0.2rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.3rem;

        .obligation_btn_price {
            margin-top: 0.1rem;
        }

        // position: absolute;
        // bottom: 0;
        div {

            .order_pay_btn {
                margin-left: 0.2rem;
            }
        }
    }
}
.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}
</style>